import React from 'react';
import './crmUserlist.less';
import { Layout, Breadcrumb, Icon, DatePicker, Button, Table, Modal, Input, Select, Form, Pagination, message, Cascader } from 'antd';
import moment from 'moment';
import $ from 'jquery';
import Config from '../../../common/config';
import { Link, hashHistory } from 'react-router';


const FormItem = Form.Item;
const config = new Config();
const { Header, Content, Footer, Sider } = Layout;
const Option = Select.Option;
const { RangePicker } = DatePicker;
const InputGroup = Input.Group;
const keyword = sessionStorage.getItem('keyword');//前台权限判断
const token = sessionStorage.getItem('token');//后台权限判断
const UserInfo = JSON.parse(sessionStorage.getItem('UserInfo'));//登录员工信息


class CrmUserlistForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            CrmUserList: [],//直销会员列表数据
            CrmUserCount: 0,//全部直销会员条数
            pagesize: 20,
            pageindex: 1,
            realname: '',//姓名
            phone: '',//电话号码
            addressName: '',//收货人
            addressPhone: '',//联系方式
            registerDateStart: '',//注册日期前
            registerDateEnd: '',//注册日期后
            manageuserid: '全部',//某个员工ID
            departmentid: '全部',//部门ID
            customersourceid: '全部',//来源ID
            CostTotalStart: '',//消费金额前
            CostTotalEnd: '',//消费金额后
            customerstatus: '全部',//客户状态
            customersourceData: [],//客户渠道下拉框数据
            DepartmentData: [],//部门下拉框数据
            ManageuserData: [],//部门下的员工下拉框数据
            registerDate: '',//注册日期
            ManPagesize: 20,
            ManPageindex: 1,
            ManUserList: [],//分配客户的员工列表
            ManUserCount: 0,//分配客户的员工总条数
            ManInkey: '',//员工列表的关键字
            ManStatus: '请选择',//员工列表的状态下拉框
            staffList: [], // 员工列表
            currentStaff: undefined, // 当前选中的人员
            currentDepartment: undefined, // 当前选中的部门
            currentDepartmentList: [], // 当前选中的部门列表
            selectedRowKeys: [],//选中的行
            visible1: false, //删除弹出框
            assigning: false, //分配客户
            departmentList: [],
            CustomerdepartmentList: [],//分配客户的部门下拉框列表
            CustomerDepartmentId: undefined, // 分配客户当前选中的部门id
            CustomercurrentDepartmentList: [], // 分配客户当前选中的部门列表
        }
    }

    componentDidMount() {
        const state = this.props.location.state;
        if (state) {
            console.log('state有值：', this.props.location.state);
            this.props.form.setFieldsValue({
                txt_realname: state.realname,
                txt_phone: state.phone,
                txt_addressName: state.addressName,
                txt_addressPhone: state.addressPhone,
                txt_CostTotalStart: state.CostTotalStart,
                txt_CostTotalEnd: state.CostTotalEnd,
            });
            this.setState({
                registerDate: state.registerDateStart ? [moment(state.registerDateStart), moment(state.registerDateEnd)] : '',
                currentDepartmentList: state.currentDepartmentList,
                staffList: state.staffList,
                id: state.userid,
                pagesize: state.pagesize,
                pageindex: state.pageindex,
                realname: state.realname,
                phone: state.phone,
                addressName: state.addressName,
                addressPhone: state.addressPhone,
                registerDateStart: state.registerDateStart,
                registerDateEnd: state.registerDateEnd,
                currentStaff: state.manageuserid,
                departmentid: state.currentDepartment,
                customersourceid: state.customersourceid == '全部' ? '' : state.customersourceid,
                CostTotalStart: state.CostTotalStart,
                CostTotalEnd: state.CostTotalEnd,
                customerstatus: state.customerstatus == '全部' ? '' : state.customerstatus,
            }, () => {
                this.GetCrmUserList();
            });
        } else {
            console.log('state为空：', this.props.location.state);
            this.GetCrmUserList();
        }
        this.BindSource();
        this.getDepartment();//部门和员工
        this.GetManagerList();//分配客户时的员工列表
    }

    //直销会员列表
    GetCrmUserList() {
        $.ajax({
            url: `${config.CrmMember}/crm_user/GetCrmUserList`,
            type: "post",
            headers: { Authorization: 'Bearer ' + token },
            async: true,
            data: {
                id: this.props.params.userid === undefined ? UserInfo.userid : this.props.params.userid,
                pagesize: this.state.pagesize,
                pageindex: this.state.pageindex,
                realname: this.state.realname,
                phone: this.state.phone,
                addressName: this.state.addressName,
                addressPhone: this.state.addressPhone,
                registerDateStart: this.state.registerDateStart,
                registerDateEnd: this.state.registerDateEnd,
                manageuserid: this.state.currentStaff,//this.state.manageuserid == '全部' ? '' : this.state.manageuserid,
                departmentid: this.state.currentDepartment,//this.state.departmentid == '全部' ? '' : this.state.departmentid,
                customersourceid: this.state.customersourceid == '全部' ? '' : this.state.customersourceid,
                CostTotalStart: this.state.CostTotalStart,
                CostTotalEnd: this.state.CostTotalEnd,
                customerstatus: this.state.customerstatus == '全部' ? '' : this.state.customerstatus,
            },
            success: res => {
                if (res.code === 200) {
                    // console.log('直销会员列表：', res);
                    const CrmUserList = res.data;
                    if (CrmUserList.length > 0) {
                        // CrmUserList.forEach((ele, i) => {
                        //     ele.index = i + 1;
                        // });
                        this.setState({
                            CrmUserList,
                            CrmUserCount: res.datacount,
                        });
                    } else {
                        this.setState({
                            CrmUserList,
                            CrmUserCount: res.datacount,
                        });
                    }
                } else {
                    message.error(`${res.mes}请返回重新操作`, 2);
                }
            }
        });
    }

    //绑定来源数据
    BindSource() {
        $.ajax({
            url: `${config.CrmSettings}/crm_customersource/BindSource`,
            type: "post",
            headers: { Authorization: 'Bearer ' + token },
            async: true,
            //data: {},
            success: res => {
                if (res.code === 200) {
                    //console.log('渠道数据：',res.data);
                    let row = [];
                    if (res.data.length > 0) {
                        res.data.forEach((fele, i) => {
                            row.push(<Option key={fele.id} value={fele.id.toString()}>{fele.sourcename}</Option>);
                        });
                        this.setState({
                            customersourceData: row
                        });
                    }
                } else {
                    message.error(`${res.mes},客户渠道获取失败！`, 2);
                }
            }
        });
    }

    // 获取部门以及员工
    getDepartment() {
        $.ajax({
            url: `${config.CrmDepartment}/department/mydepTree`,
            type: 'get',
            headers: { Authorization: 'Bearer ' + token },
            data: { id: UserInfo.id },//登录的员工ID
            success: res => {
                //console.log('获取部门以及员工', res);
                if (res.code === 200) {
                    const loop = (list) => {
                        list.map(item => {
                            item.value = item.id;
                            item.label = item.name;
                            if (item.son.length) {
                                item.children = item.son;
                                loop(item.children);
                            }
                        })
                    };
                    loop(res.mydep);
                    this.setState({
                        departmentList: res.mydep,
                        CustomerdepartmentList: res.mydep
                    });
                }
            }
        });
    }

    // 选择部门
    selectDepartment(list) {
        const id = list[list.length - 1];
        let staffList = [];
        if (id) {
            const loop = (list, id) => {
                let arr = [];
                list.forEach(item => {
                    if (item.id == id) {
                        arr = arr.concat(item.userlist);
                        item.son.forEach(value => {
                            arr = arr.concat(loop(item.son, value.id));
                        });
                    } else {
                        arr = arr.concat(loop(item.son, id));
                    }
                });
                return arr;
            }
            const { departmentList } = this.state;
            staffList = loop(departmentList, id);
        }
        //console.log(staffList);
        // staffList.forEach((item, index) => {
        //     item.key = index;
        // });
        this.setState({
            staffList,
            currentStaff: undefined,
            currentDepartment: id,
            currentDepartmentList: list
        });
    }

    //分配客户的选择部门
    selectCustomerDepartment(list) {
        const id = list[list.length - 1];
        this.setState({
            CustomerDepartmentId: id,
            CustomercurrentDepartmentList: list
        });
    }

    // 选择员工
    selectStaff(value) {
        this.setState({
            currentStaff: value
        });
    }

    //员工列表
    GetManagerList() {
        $.ajax({
            url: `${config.CrmDepartment}/manager/filter`,
            type: "post",
            headers: { Authorization: 'Bearer ' + token },
            async: true,
            data: {
                id: UserInfo.id,//登录的员工ID
                pageSize: this.state.pagesize,
                page: this.state.pageindex,
                value: this.state.ManInkey,//姓名,手机号,登录名
                department: this.state.CustomerDepartmentId,//分配客户的部门ID
                status: this.state.ManStatus == '请选择' ? '' : this.state.ManStatus//状态ID
            },
            success: res => {
                console.log('员工列表：', res);
                if (res.code === 200) {
                    const list = res.data.list;
                    if (list.length > 0) {
                        // list.forEach((ele, i) => {
                        //     ele.key = i + 1;
                        // });
                        this.setState({
                            ManUserList: list,
                            ManUserCount: res.data.total,
                        });
                    } else {
                        this.setState({
                            ManUserList: list,
                            ManUserCount: res.data.total,
                        });
                    }
                }
            }
        });
    }



    // 分页
    changePage(pageindex) {
        this.setState({
            pageindex
        }, () => {
            this.GetCrmUserList();
        });
    }

    // 分页
    ManChangePage(ManPageindex) {
        this.setState({
            ManPageindex
        }, () => {
            this.GetManagerList();
        });
    }

    //注册日期的改变事件
    changeRegisterDate(e, dateString) {
        if (dateString[0] == '' && dateString[1] == '') {
            this.setState({
                registerDate: '',
                registerDateStart: dateString[0],
                registerDateEnd: dateString[1]
            })
        } else {
            this.setState({
                registerDate: [moment(dateString[0]), moment(dateString[1])],
                registerDateStart: dateString[0],
                registerDateEnd: dateString[1]
            })
        }
    }

    //归属人部门下拉框的改变事件
    departmentidChange(v) {
        this.setState({
            departmentid: v
        });
    }

    //归属人员工下拉框的改变事件
    manageuseridChange(v) {
        this.setState({
            manageuserid: v
        });
    }

    //来源下拉框的改变事件
    customersourceidChange(v) {
        this.setState({
            customersourceid: v
        });
    }

    //客户状态下拉框的改变事件
    customerstatusChange(v) {
        this.setState({
            customerstatus: v
        });
    }

    //消费金额前置搜索框
    CostTotalStartChange(e) {
        let { form } = this.props;
        form.validateFields(['txt_CostTotalStart'], (err, values) => {
            if (!err) {
                let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                // console.log(values.txt_CostTotalStart.indexOf('.'));
                if (values.txt_CostTotalStart.indexOf('.') == 0 || values.txt_CostTotalStart.indexOf('.') == -1) {
                    if (!reg.test(values.txt_CostTotalStart)) {
                        form.setFieldsValue({
                            txt_CostTotalStart: '',
                        });
                    }
                } else if (values.txt_CostTotalStart.indexOf('.') > 0) {
                    let value = values.txt_CostTotalStart;
                    let a = values.txt_CostTotalStart.split('.')[0];
                    let b = a.length + 1;
                    // console.log('spllit：', value.substring(b).length);
                    if (value.substring(b).indexOf('.') > -1 || value.substring(b).length > 2) {
                        if (!reg.test(values.txt_CostTotalStart)) {
                            form.setFieldsValue({
                                txt_CostTotalStart: '',
                            });
                        }
                    }
                }
            }
        });
    }

    //消费金额后置搜索框
    CostTotalEndChange(e) {
        let { form } = this.props;
        form.validateFields(['txt_CostTotalEnd'], (err, values) => {
            if (!err) {
                let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                // console.log(values.txt_CostTotalEnd.indexOf('.'));
                if (values.txt_CostTotalEnd.indexOf('.') == 0 || values.txt_CostTotalEnd.indexOf('.') == -1) {
                    if (!reg.test(values.txt_CostTotalEnd)) {
                        form.setFieldsValue({
                            txt_CostTotalEnd: '',
                        });
                    }
                } else if (values.txt_CostTotalEnd.indexOf('.') > 0) {
                    let value = values.txt_CostTotalEnd;
                    let a = values.txt_CostTotalEnd.split('.')[0];
                    let b = a.length + 1;
                    // console.log('spllit：', value.substring(b).length);
                    if (value.substring(b).indexOf('.') > -1 || value.substring(b).length > 2) {
                        if (!reg.test(values.txt_CostTotalEnd)) {
                            form.setFieldsValue({
                                txt_CostTotalEnd: '',
                            });
                        }
                    }
                }
            }
        });
    }

    //搜索
    SearchCrmUserInfoBtn(e) {
        const form = this.props.form;
        this.setState({
            pageindex: 1,
            realname: form.getFieldValue('txt_realname') || '',
            phone: form.getFieldValue('txt_phone') || '',
            addressName: form.getFieldValue('txt_addressName') || '',
            addressPhone: form.getFieldValue('txt_addressPhone') || '',
            CostTotalStart: form.getFieldValue('txt_CostTotalStart') || '',
            CostTotalEnd: form.getFieldValue('txt_CostTotalEnd') || '',
        }, () => {
            this.GetCrmUserList();
        });
    }

    //分配客户的搜索
    BtnAssCustomers() {
        const form = this.props.form;
        this.setState({
            pageindex: 1,
            ManInkey: form.getFieldValue('txt_Inkey') || '',
        }, () => {
            this.GetManagerList();
        });
    }

    //重置
    ResetBtn(e) {
        const form = this.props.form;
        form.resetFields();
        this.setState({
            registerDateStart: '',
            registerDateEnd: '',
            registerDate: '',
            customersourceid: '全部',
            CostTotalStart: '',
            CostTotalEnd: '',
            customerstatus: '全部',
            currentStaff: undefined,
            currentDepartmentList: [],
            currentDepartment: undefined,
            staffList: [],
        });
    }

    //员工列表的状态下拉框改变事件
    ManStatusChange(v) {
        this.setState({
            ManStatus: v
        });
    }

    //删除弹出框事件
    showModal1() {
        console.log(this.state.selectedRowKeys);
        if (this.state.selectedRowKeys.length === 0) {
            message.warning('请先选择要删除的数据！', 2);
        } else {
            this.setState({
                visible1: true,
            });
        }
    }
    //删除直销会员
    handleOk1() {
        const { selectedRowKeys } = this.state;
        if (selectedRowKeys.length === 0) {
            message.warning('请先选择要删除的数据！', 2);
        } else {
            $.ajax({
                url: `${config.CrmMember}/crm_user/DelCrmUser`,
                type: "post",
                headers: { Authorization: 'Bearer ' + token },
                data: {
                    userid: selectedRowKeys.toString()
                },
                success: res => {
                    console.log(res)
                    if (res.code == 200) {
                        message.success('直销会员删除成功！', 2);
                        this.setState({
                            pageindex: 1,
                            visible1: false,
                            selectedRowKeys: [],
                        }, () => this.GetCrmUserList());
                    } else {
                        message.error('服务器繁忙，请稍后再试', 2);
                    }
                }
            })
        }
    }
    //取消直销会员
    handleCancel1() {
        this.setState({
            visible1: false,
        });
    }

    //确认选择管理员(分配客户)
    SureSelectMan(userid) {
        $.ajax({
            url: `${config.CrmMember}/crm_user/AssignCustomers`,
            type: "post",
            headers: { Authorization: 'Bearer ' + token },
            data: {
                userid: this.state.selectedRowKeys.toString(),//选择的客户ID
                managerid: userid//员工ID
            },
            success: res => {
                console.log(res)
                if (res.code == 200) {
                    message.success('分配客户成功！', 2);
                    this.setState({
                        pageindex: 1,
                        assigning: false,
                        selectedRowKeys: [],
                    }, () => this.GetCrmUserList());
                } else {
                    message.error('服务器繁忙，请稍后再试', 2);
                }
            }
        })
    }

    //分配客户事件
    showModalAssigning() {
        const { selectedRowKeys } = this.state;
        console.log(this.state.selectedRowKeys.id);
        if (selectedRowKeys.length === 0) {
            message.warning('请先选择要分配的客户！', 2);
        } else {
            this.setState({
                assigning: true,
            }, () => {
                this.getDepartment();
            });
        }
    }
    handleOkAssigning() {
        this.setState({
            assigning: false,
        });
    }
    handleCancelAssigning() {
        this.setState({
            assigning: false,
        });
    }

    addCrmUser() {
        this.props.changeMenu('crmAddCrmUser');
        window.location.hash = '/crmAddCrmUser'
    }
    render() {
        const { getFieldDecorator } = this.props.form;

        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({ selectedRowKeys });
            }
        };
        const columns = [
            {
                title: '姓名',
                dataIndex: 'realname',
                width: '6%'
            }, {
                title: '手机号',
                dataIndex: 'phone',
                width: '12%'
            }, {
                title: '创建人',
                dataIndex: 'CeateUserName',
                width: '10%'
            }, {
                title: '归属人',
                dataIndex: 'ManageUserName',
                width: '10%'
            }, {
                title: '客户需求',
                dataIndex: 'remark',
                width: '14%',
                render: (text, record) => {
                    return <div title={text} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 70, margin: '0 auto', }}>{text}</div>;
                }
            }, {
                title: '消费总金额',
                dataIndex: 'costtotal',
                width: '10%'
            }, {
                title: '注册日期',
                dataIndex: 'createdAt',
                width: '10%',
                render: (text, record) => {
                    return moment(text).format('YYYY-MM-DD HH:mm');
                }
            }, {
                title: '成交次数',
                dataIndex: 'volamount',
                width: '6%'

            }, {
                title: '回访次数',
                dataIndex: 'followuptimes',
                width: '10%'
            }, {
                title: '详情',
                dataIndex: 'id',
                width: '10%',
                render: (text, record) => {
                    let data = {
                        userid: UserInfo.userid,
                        pagesize: this.state.pagesize,
                        pageindex: this.state.pageindex,
                        realname: this.state.realname,
                        phone: this.state.phone,
                        addressName: this.state.addressName,
                        addressPhone: this.state.addressPhone,
                        registerDateStart: this.state.registerDateStart,
                        registerDateEnd: this.state.registerDateEnd,
                        manageuserid: this.state.currentStaff,
                        departmentid: this.state.currentDepartment,
                        customersourceid: this.state.customersourceid,
                        CostTotalStart: this.state.CostTotalStart,
                        CostTotalEnd: this.state.CostTotalEnd,
                        customerstatus: this.state.customerstatus,
                        currentDepartmentList: this.state.currentDepartmentList,//归属人部门
                        staffList: this.state.staffList,//归属人员工
                    };
                    let path = {
                        pathname: `/crmUserlistDetails/${text}`,
                        state: data,
                    }
                    return <Link to={path}>详情</Link>;
                    // return <Link to={`/crmUserlistDetails/${text}`}>详情</Link>;
                }
            }
        ];

        const columns1 = [
            {
                title: '姓名',
                dataIndex: 'username',
                width: '7%'
            }, {
                title: '登录名',
                dataIndex: 'userid',
                width: '6%'
            }, {
                title: '手机号',
                dataIndex: 'phone',
                width: '6%'
            }, {
                title: '部门',
                dataIndex: 'depname',
                width: '6%'
            }, {
                title: '状态',
                dataIndex: 'status',
                width: '4%',
                render: (text, record) => {
                    return text == '1' ? '在职' : '试用期'
                }
            }, {
                title: '性别',
                dataIndex: 'gender',
                width: '6%',
                render: (text, record) => {
                    return text == '0' ? '男' : text == '1' ? '女' : '保密'
                }
            }, {
                title: '角色',
                dataIndex: 'roles',
                width: '4%',
                render: (text, record) => {
                    return <div>{JSON.parse(text).join(',')}</div>;
                }
            }, {
                title: '选择',
                dataIndex: 'id',
                width: '5%',
                render: (text, record) => {
                    return <div><a onClick={this.SureSelectMan.bind(this, record.userid)}>确认选择</a></div>;
                }
            }
        ];
        console.log(this)
        return (
            <Form>
                <div className='goods-label'>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>会员管理</Breadcrumb.Item>
                                <Breadcrumb.Item>会员列表</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className='member-content-Search clearfix'>
                            <div className='addetd addetd-z  addetd-cg'>
                                <FormItem>
                                    {
                                        getFieldDecorator('txt_realname')(
                                            <Input className='addetd-a-r' addonBefore="姓 名" placeholder="请输入" />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-z addetd-cg'>
                                <FormItem>
                                    {
                                        getFieldDecorator('txt_phone')(
                                            <Input className='addetd-a-r' addonBefore="电话号码" placeholder="请输入" />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-z addetd-cg'>
                                <FormItem>
                                    {
                                        getFieldDecorator('txt_addressName')(
                                            <Input className='addetd-a-r' addonBefore="收货人" placeholder="请输入" />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-z addetd-cg'>
                                <FormItem>
                                    {
                                        getFieldDecorator('txt_addressPhone')(
                                            <Input className='addetd-a-r' addonBefore="联系方式" placeholder="请输入" />
                                        )
                                    }
                                </FormItem>
                            </div>
                        </div>
                        <div className='member-content-Search clearfix'>
                            <div className='addetd addetd-a addr-yo' style={{ marginRight: 0 }} >
                                <InputGroup compact>
                                    <span className='chengge-a fkov-a'>注册日期</span>
                                    <div className='chengge-d' style={{ marginRight: 0 }}>
                                        <RangePicker
                                            placeholder={['请选择日期', '请选择日期']}
                                            onChange={this.changeRegisterDate.bind(this)}
                                            format='YYYY-MM-DD HH:mm'
                                            value={this.state.registerDate}
                                        />
                                    </div>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a cake-aoot' style={{ marginRight: 0 }} >
                                <InputGroup compact>
                                    <span className='chengge-a fkov-tyo'>归属人</span>
                                    <Cascader options={this.state.departmentList} placeholder='请选择部门' changeOnSelect onChange={this.selectDepartment.bind(this)} value={this.state.currentDepartmentList} />
                                    {/* <InputGroup compact>
                                    <Input addonBefore="归属人" />
                                    <Select value={this.state.departmentid} onChange={this.departmentidChange.bind(this)}>

                                    </Select>
                                </InputGroup> */}
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a indtner  indtner-trs  jgooh-hg'>
                                <InputGroup compact>
                                    <Select value={this.state.currentStaff} onChange={this.selectStaff.bind(this)} className='setOrder-user-personnel' placeholder='请选择员工' allowclear>
                                        {
                                            this.state.staffList.map((item, index) => {
                                                return <Option value={item.userid} key={index}>{item.name}</Option>
                                            })
                                        }
                                    </Select>
                                </InputGroup>
                            </div>
                        </div>
                        <div className='member-content-Search clearfix'>
                            <div className='addetd addetd-a indtner '>
                                <InputGroup compact>
                                    <Input addonBefore="来      源" />
                                    <Select value={this.state.customersourceid} onChange={this.customersourceidChange.bind(this)}>
                                        {this.state.customersourceData}
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a indtner  pont-a'>
                                {/* <Input className='addetd-a-r' addonBefore="消费金额" /> */}
                                <FormItem>
                                    {
                                        getFieldDecorator('txt_CostTotalStart', {
                                            initialValue: "",
                                            validateTrigger: 'onKeyUp',
                                        })(
                                            // <InputGroup compact>
                                            <Input addonBefore="消费金额" onKeyUp={this.CostTotalStartChange.bind(this)} />
                                            // </InputGroup>
                                            )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-a indtner  pont-a hout-ta'>
                                <InputGroup compact>
                                    ~
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a indtner  pont-a  pyone-at'>
                                <FormItem>
                                    {
                                        getFieldDecorator('txt_CostTotalEnd', {
                                            initialValue: "",
                                            validateTrigger: 'onKeyUp',
                                        })(
                                            // <InputGroup compact>
                                            <Input size="large" style={{ width: 130, height: 40 }} onKeyUp={this.CostTotalEndChange.bind(this)} />
                                            // </InputGroup>
                                            )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-a indtner  pont-a'>
                                <InputGroup compact>
                                    <Input addonBefore="客户状态" />
                                    <Select value={this.state.customerstatus} onChange={this.customerstatusChange.bind(this)}>
                                        <Option value="1">成交</Option>
                                        <Option value="2">意向客户</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <Button type="primary" style={{ marginLeft: 50 }} className='member-button' icon="search" onClick={this.SearchCrmUserInfoBtn.bind(this)}>搜索</Button>
                            <Button type="primary" className='member-button' icon="reload" onClick={this.ResetBtn.bind(this)}>重置</Button>
                        </div>
                        <div className='chengge-e  your_sa' style={{ marginBottom: 20 }}>
                            {/* <Button className='member-button-aa' type='primary' style={{ marginLeft: 20 }} onClick={() => this.generateBarCode()}>生成快递号</Button>
                                <Button className='member-button-aa' type='primary' onClick={() => this.printExpressBill()}>打印快递单</Button> */}

                            {keyword.includes('crm_userAddCrmUser') ? <Button onClick={this.addCrmUser.bind(this)} className='member-button-aa' type='primary' style={{ marginLeft: 20 }}><Icon type="plus" />新增</Button> : ''}
                            {keyword.includes('crm_userDelCrmUser') ? <Button className='member-button-aa' onClick={this.showModal1.bind(this)} style={{ width: 100 }} type='primary'>删除</Button> : ''}
                            <Modal title="删除" visible={this.state.visible1}
                                onOk={this.handleOk1.bind(this)} onCancel={this.handleCancel1.bind(this)}
                            >
                                <div className='delets_gg'>
                                    <p className='delets_gg1'>温馨提示</p>
                                    <p>删除后不可恢复，是否继续删除？</p>
                                </div>
                            </Modal>
                            {keyword.includes('crm_userAssignCustomers') ? <Button className='member-button-aa' style={{ width: 100 }} type='primary' onClick={this.showModalAssigning.bind(this)} >分配客户</Button> : ''}
                            <Modal title="员工列表" visible={this.state.assigning}
                                onOk={this.handleOkAssigning.bind(this)} onCancel={this.handleCancelAssigning.bind(this)}
                                width={'1100px'}
                            >
                                <div className='delets_gg'>
                                    <div className='addetd addetd-z'>
                                        <FormItem>
                                            {
                                                getFieldDecorator('txt_Inkey')(
                                                    <Input className='addetd-a-r' addonBefore="姓名/手机号/登录名" placeholder="请输入" />
                                                )
                                            }
                                        </FormItem>
                                    </div>
                                    <div className='addetd addetd-a cake-aoot' >
                                        <InputGroup compact>
                                            <span className='chengge-a fkov-tyo lojo-yo'>归属人</span>
                                            <Cascader options={this.state.CustomerdepartmentList} placeholder='请选择部门' changeOnSelect onChange={this.selectCustomerDepartment.bind(this)} value={this.state.CustomercurrentDepartmentList} />
                                        </InputGroup>
                                    </div>
                                    <div className='addetd addetd-a yryre-1'>
                                        <InputGroup compact>
                                            <Input addonBefore="状态" />
                                            <Select value={this.state.ManStatus} onChange={this.ManStatusChange.bind(this)}>
                                                <Option value="">请选择</Option>
                                                <Option value="1">在职</Option>
                                                <Option value="2">试用期</Option>
                                            </Select>
                                        </InputGroup>
                                    </div>
                                    <Button type="primary" style={{ marginLeft: 50 }} className='member-button' style={{ width: 100, height: 40 }} icon="search" onClick={this.BtnAssCustomers.bind(this)} >搜索</Button>
                                </div>
                                <Table
                                    rowKey='id'
                                    columns={columns1}
                                    dataSource={this.state.ManUserList}
                                    pagination={false}
                                    bordered
                                />
                                <div className='goods-label-let clearfix' style={{ float: 'none' }}>
                                    <div className="floor-ppagi">
                                        {
                                            this.state.ManUserCount == 0 ?
                                                <p className="floor-ppagip">
                                                    共{this.state.ManUserCount}条记录
                                </p> :
                                                <p className="floor-ppagip">
                                                    当前显示
                                    {this.state.ManPagesize * (this.state.ManPageindex - 1) + 1}—
                                    {this.state.ManPagesize * this.state.ManPageindex < this.state.ManUserCount ? this.state.pagesize * this.state.ManPageindex : this.state.ManUserCount}条记录，
                                    共{this.state.ManUserCount}条记录
                                </p>
                                        }
                                        <Pagination current={this.state.ManPageindex} total={this.state.ManUserCount || 1} defaultPageSize={this.state.ManPagesize} onChange={this.ManChangePage.bind(this)} />
                                    </div>
                                </div>
                            </Modal>
                            {/* <Button className='member-button-aa' style={{ width: 100 }} type='primary'>导出</Button> */}

                        </div>
                        <div className='allgoods-table clearfix'>
                            <Table
                                rowKey="id"
                                rowSelection={rowSelection}
                                columns={columns}
                                dataSource={this.state.CrmUserList}
                                pagination={false}
                                bordered
                            />
                        </div>
                        <div className='goods-label-let'>
                            <div className="floor-ppagi">
                                {
                                    this.state.CrmUserCount == 0 ?
                                        <p className="floor-ppagip">
                                            共{this.state.CrmUserCount}条记录
                                </p> :
                                        <p className="floor-ppagip">
                                            当前显示
                                    {this.state.pagesize * (this.state.pageindex - 1) + 1}—
                                    {this.state.pagesize * this.state.pageindex < this.state.CrmUserCount ? this.state.pagesize * this.state.pageindex : this.state.CrmUserCount}条记录，
                                    共{this.state.CrmUserCount}条记录
                                </p>
                                }
                                <Pagination current={this.state.pageindex} total={this.state.CrmUserCount || 1} defaultPageSize={this.state.pagesize} onChange={this.changePage.bind(this)} />
                            </div>
                        </div>
                    </div>
                </div>
            </Form>
        )
    }
}

const CrmUserlist = Form.create()(CrmUserlistForm);
export default CrmUserlist;